<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			padding: 0; margin: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.scrollImg{
			width: 810px;
			height: 320px;
			margin: auto;
			overflow: hidden;
			position: relative;
		}
		.scrollImg .imgs {
			width: 4050px;
			list-style: none;
			position: absolute;
			left: 0; top: 0;
		}
		.scrollImg .imgs li {
			width: 810px; height: 320px;
			float: left;
			font-size: 50px;
		}
		.scrollImg .imgnav {
			position: absolute;
			right : 30px; bottom: 30px;
			width : 100px; height: 15px;
			list-style: none;
		}
		.scrollImg .imgnav li {
			float: left;
			width: 10px; height: 10px;
			border-radius: 50%;
			background: rgba(241,200,180, 0.6);
			margin-right: 5px;
		}
		.scrollImg .imgnav li.active{
			background: black;
		}
	</style>
	<script src="js/move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		onload =function(){
			var oUL = document.getElementsByTagName("ul")[0];
			var nav = document.getElementsByClassName("imgnav")[0].children;
			
			var index = 1;
			setInterval(function(){
				tabNav(); //切换导航
				tabImg(); //切换图片
			},2000);
			function tabImg(){
				animate(oUL, {left: -810*index}, {callback:function(){
					//callback称为回调函数, 指的是一种使用函数的方式
					//以下代码，必须放在回调中，确保运动结束后再执行。
					if(index == 4) {
						index = 0;					
						oUL.style.left = 0;
					}
					index++;
				}});
			}
			
			function tabNav(){
				for(var i=0; i<nav.length; i++) nav[i].className = "";
				nav[index==4?0:index].className = "active";
			}
		}
	</script>	
	<body>
		<div class="scrollImg">
			<ul class="imgs">
				<li style="background: red;">A</li>
				<li style="background: blue;">B</li>
				<li style="background: yellow;">C</li>
				<li style="background: gray;">D</li>
				<li style="background: red;">A</li>
			</ul>
			<ul class="imgnav">
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
	</body>
</html>
